<template>
    <div>
        
        <div class="head-search">
            <el-button type="primary" @click="openDialog">新增</el-button>
        </div>

        <!-- 表格 -->
        <div class="table-wrap" >
            <el-table :data="list" border style="width: 100%">
                <el-table-column  prop="roleId" label="roleId" width="180" ></el-table-column>
                <el-table-column prop="roleName" label="角色名称" width="180" />
                <el-table-column prop="title" label="权限" width="380" >
                    <template #default="{row}">
                         <el-button v-for="(item,index) in row.authority"
                                type="primary"
                                :key="index"
                                link
                                size="small"
                            >
                            {{item}}
                        </el-button>
                    </template>
                </el-table-column>
                 <el-table-column prop="title" label="权限" width="380" >
                    <template #default="{row}">
                         <el-button 
                                type="primary"
                                link
                                size="small"
                                @click="changeAuth(row)"
                            >
                            修改权限
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
            
        </div>

        <!-- 添加角色的弹窗 -->
        <el-dialog
            v-model="dialogVisible"
            title="新增"
            width="50%"
            :before-close="handleClose"
        >
            <div>
                <span >角色名称：</span>
                <el-input type="text" v-model="addRoleName" style="padding-top:14px"></el-input>
            </div>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="add"
                >确定新增</el-button
                >
            </span>
            </template>
        </el-dialog>



    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import {getRoleList} from "@/request/api"
import {initData} from "@/assets/typescript/role";
import { Edit} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import {useRouter} from "vue-router";

export default defineComponent({
    setup () {
        const data = reactive(new initData());
        const router = useRouter();

        data.dialogVisible = false;
        onMounted(()=>{
            getRoleList().then(res=>{
                data.list = res.data
            })
        })
        
        const openDialog = ()=>{
            data.dialogVisible = true;
        }

        const add = () => {
            let value:String = data.addRoleName
            if(!value){
                ElMessage({
                    type: 'info',
                    message: '请检查输入内容',
                })
                return
            }

            // 注意list里面的值一定是new出来的值是一样的，不然会出现报错
            data.list.push({
                roleId:data.list.length+1,
                roleName:value,
                authority:[]
            })

            ElMessage({
                type: 'success',
                message: '添加成功',
            })
            data.dialogVisible = false
        }

        const changeAuth = (row:any)=>{
            router.push({
                name:"auth",
                params:{
                    id:row.roleId,
                    auth:row.authority
                }

                // path:"/home/auth",
                // query:{
                //     id:row.roleId,
                //     auth:row.authority.join(",")
                // }

            })
            
        }

        return {...toRefs(data),Edit,add,openDialog,ElMessage,changeAuth}
    }
})
</script>

<style scoped>
.head-search{
    border-bottom: 1px solid #000;
    margin-bottom: 50px;
    padding-bottom: 30px;
}
</style>